<template>
  <div class="FromGood">
    <el-form
      :model="From"
      :rules="ruleGood"
      ref="From"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-form-item label="部门" prop="name">
        <el-col :span="5">
          <el-input v-model="From.deptName" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="工号" prop="name">
        <el-col :span="5">
          <el-input v-model="From.jobNo" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="岗位" prop="name">
        <el-col :span="5">
          <el-input v-model="From.job" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="职级" prop="name">
        <el-col :span="5">
          <el-select v-model="From.jobLevel" placeholder="请选择">
            <el-option label="一级技师" value="1"></el-option>
            <el-option label="二级技师" value="2"></el-option>
            <el-option label="三级技师" value="3"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="员工姓名" prop="name">
        <el-col :span="5">
          <el-input v-model="From.employeeName" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="员工电话" prop="name">
        <el-col :span="5">
          <el-input
            v-model="From.employeePhone"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="头像地址" prop="goodsImage">
        <el-upload
          :action="baseurl + '/upload'"
          list-type="picture-card"
          multiple
          :limit="1"
          :on-preview="avhandlePictureCardPreview"
          :on-remove="avhandleRemove"
          :on-success="avuploadSuccess"
          :file-list="avfileList"
          :on-exceed="avmessage"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="From.avatarUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item v-show="false" label="头像地址" prop="name">
        <el-input v-model="From.avatarUrl" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="name">
        <el-col :span="5">
          <el-input v-model="From.description" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="营业时间" prop="name">
        <el-col :span="5">
          <el-input
            v-model="From.businessHours"
            placeholder="请输入"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="年龄" prop="name">
        <el-col :span="5">
          <el-input-number
            v-model="From.age"
            placeholder="请输入"
            :min="1"
            :max="60"
          ></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item label="出生日期" prop="name">
        <el-col :span="5">
          <el-input v-model="From.dateOfBirth" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="身份证号" prop="name">
        <el-col :span="5">
          <el-input v-model="From.idCard" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="居住地址" prop="name">
        <el-col :span="5">
          <el-input v-model="From.address" placeholder="请输入"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="身份照片" prop="name">
        <el-upload
          :action="uploadbaseurl + '/upload'"
          list-type="picture-card"
          multiple
          :limit="2"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="uploadSuccess"
          :file-list="fileList"
          :on-exceed="message"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="员工状态" prop="name">
        <el-select v-model="From.status" placeholder="请选择">
          <el-option label="禁用" value="0"></el-option>
          <el-option label="正常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="薪资" prop="name">
        <el-input-number
          v-model="From.salary"
          placeholder="请输入"
          :min="1000"
          :max="6000000"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="聘用形式" prop="name">
        <el-select v-model="From.jobType" placeholder="请选择">
          <el-option label="实习" value="0"></el-option>
          <el-option label="正式" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm('From')"
          >立即修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      uploadbaseurl: "",
      loading: false,
      From: {
        deptName: "",
        jobNo: "",
        job: "",
        jobType: "",
        employeeName: "",
        employeePhone: "",
        avatarUrl: "",
        description: "",
        businessHours: "",
        age: "",
        salary: "",
        idCardImage: [],
      },
      ruleGood: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
      },
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      avfileList: [],
    };
  },
  mounted() {
    this.uploadbaseurl = this.baseurl;

    this.initData();
  },
  methods: {
    async initData() {
      let res = await this.http.get("/techManage/getById?id=" + this.id);
      this.From = res.error ? {} : res.result;
      this.From.status = res.result.status.toString();
      this.From.jobType = res.result.jobType.toString();
      this.From.jobLevel = res.result.jobLevel.toString();
      this.avfileList = res.result.avatarUrl
        ? [{ url: res.result.avatarUrl }]
        : [];
      this.From.idCardImage = res.result.idCardImage
        ? res.result.idCardImage.split(",")
        : [];
      this.From.idCardImage.forEach((e, i) => {
        this.fileList.push({
          name: `img_${i}`,
          url: e,
          response: { result: [e] },
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.add();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async add() {
      let type = "success",
        rmsg;
      let req = {
        ...this.From,
      };
      req.idCardImage =
        !req.idCardImage instanceof Array
          ? req.idCardImage
          : req.idCardImage.join(",");
      if (!req.employeeName) (type = "error"), (rmsg = "请输入员工姓名");
      else if (!req.job) (type = "error"), (rmsg = "请输入员工岗位");
      else if (!req.jobNo) (type = "error"), (rmsg = "请输入员工工号");
      else if (!req.employeePhone) (type = "error"), (rmsg = "请输入员工电话");
      else if (!req.salary) (type = "error"), (rmsg = "请输入员工薪资");
      else {
        let res = await this.http.post("/techManage/update", req);
        if (!res.error) {
          (type = "success"), (rmsg = "修改成功");
        } else {
          (type = "error"), (rmsg = "修改失败");
        }
      }
      this.eui.Message({
        message: rmsg,
        type: type,
        duration: 5 * 1000,
      });
      this.loading = false;
    },
    handleRemove(file, fileList) {
      this.From.idCardImage = this.dealFileList(fileList).join(",");
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadSuccess(response, file, fileList) {
      this.From.idCardImage = this.dealFileList(fileList).join(",");
    },
    dealFileList(fileList) {
      var list = [];
      fileList.forEach((element) => {
        element.response.result.forEach((e) => {
          list.push(e);
        });
      });
      return list;
    },
    message(msg, type) {
      this.eui.Message({
        message: "超出上传个数，最多只能上传2张商品图片",
        type: "error",
      });
    },

    avhandleRemove(file, fileList) {
      this.From.avatarUrl = "";
    },
    avhandlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    avuploadSuccess(response, file, fileList) {
      this.From.avatarUrl = response.result[0];
    },
    avdealFileList(fileList) {},
    avmessage(msg, type) {
      this.eui.Message({
        message: "超出上传个数",
        type: "error",
      });
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>